import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store/index.js'
//引入router
import router from './router/index.js'
//全局注册panner组件
import panelHead from './components/panelHead.vue'

//添加路由守卫,鉴权判断(在页面跳转之前)
//回调函数中有三个参数，to from next 这里我们需要把next剔除，因为我们目前不需要
router.beforeEach((to, from) => {
    //localStorage.getItem('pz_token')从浏览器的本地存储中获取一个名为pz_token的值，这个值通常用于存储用户的登录状态。
    //   to：即将要进入的目标路由对象。它包含了目标路由的所有信息，如路径、参数、查询字符串等。
    // from：当前导航正要离开的路由对象。它包含了当前路由的所有信息，如路径、参数、查询字符串等。
    // next：一个函数，调用next()来解析这个钩子。next()函数可以接受一个参数，这个参数可以是目标路由的路径，也可以是一个错误对象，用于中断导航。
    const token = localStorage.getItem('pz_token');//获取token
    //非登录页面token还不存在，跳转到登录页面
    if ( !token&&to.path !== '/login') {
        console.log("不在登陆页面，尝试进行跳转",to.path)
        return '/login'
    } else if ( token && to.path === '/login' ) {//token已经存在而且还在不在登录页面，跳转到首页
        console.log("在登陆页面，尝试进行跳转")
        return '/'
    } else {
        return true
    }
})
const app = createApp(App)//创建一个实例

//全局注册elelment-plus图标
import * as ElIconModules from '@element-plus/icons-vue'
for (const iconName in ElIconModules) {
    app.component(iconName, ElIconModules[iconName])
}

//全局注册组件，第一个参数是组件名（在其他组件上面引用的名字），第二个参数是组件对象
app.component('panelHead', panelHead)

//后续的挂载直接使用.use进行
//挂载路由
app.use(router)
//挂载vuex
app.use(store)
app.mount('#app')
